<template>
  <div class="searchPage-body">
    <div class="searchPage-body-inner">
      <div class="searchPage-body-inner-left">
        <div class="searchPage-body-inner-left-fillter">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="全站" name="first">
                <BlogArticles></BlogArticles>
            </el-tab-pane>
            <el-tab-pane label="博客" name="second">博客</el-tab-pane>
            <el-tab-pane label="下载" name="third">下载</el-tab-pane>
            <el-tab-pane label="代码" name="fourth">代码</el-tab-pane>
            <el-tab-pane label="用户" name="five">用户</el-tab-pane>
            <el-tab-pane label="课程" name="six">课程</el-tab-pane>
            <el-tab-pane label="专栏" name="seven">专栏</el-tab-pane>
            <el-tab-pane label="问答" name="eight">问答</el-tab-pane>
            <el-tab-pane label="商城" name="nive">商城</el-tab-pane>
            <el-tab-pane label="更多" name="ten">更多</el-tab-pane>
          </el-tabs>

        </div>


      </div>
      <div class="searchPage-body-inner-right">



      </div>

    </div>

  </div>
</template>

<script>
import BlogArticles from "@/components/search/tabitems/BlogArticles.vue";
export default {
  name: "SearchPageBody",
  components:{
    BlogArticles
  },
  data(){
    return{
      activeName: 'first'
    }
  },

  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    }

  },
}
</script>

<style >
.searchPage-body{
  display: flex;
  width: 100%;
  height: 900px;
  justify-content: center;

}
.searchPage-body-inner{
  display: flex;
  width: 1341px;
}
.searchPage-body-inner-left{
width: 1050px;
}
.searchPage-body-inner-left-fillter{
  display: flex;
  width: 1020px;
  /*font-size: 10px;*/
}
.searchPage-body-inner-left-fillter .fillter-left{
  display: flex;
  justify-content: space-around;
 flex-grow: 3;
}
.searchPage-body-inner-left-fillter .fillter-right{
  flex-grow: 2;

}

.article-footer-right a{
  text-decoration: none;
  font-size: 13px;
  color: black;
}
.article-footer-right a:hover{
  color: #fd5531;
}
.searchPage-body-inner-right{
  flex-grow: 1;

}
/*tab部分*/
.el-tabs__item.is-active {
  color: black;
  font-weight: bolder;

}
.el-tabs__item:hover{
  color: black!important;
  font-weight: bolder;
}
.el-tabs__nav-scroll{
  padding-left: 30px;
  font-size: 16px!important;
  width: 1000px;
}
.el-tabs__active-bar {
  background-color: black!important;
}
.el-tabs__header{
  margin-bottom: 0px;
}
.el-tabs__nav-wrap::after{
  width: 1000px;
  display: none;
}
</style>